<template>
<div class="templateComtainer wp100">
  <div class="item vm wp100">
    <h5>
      <div class="vm">客户跟进</div>
      <div class="vm fr">
        <zm-data-select
          v-model="tabType"
          :list="followType"
          class="w120 pr20"
          :clearable="false"
          size="mini"
          @change="loadList"
        ></zm-data-select>
        <el-button type="text" class="vm tc-right" @click="more">
          查看更多 <span class="vm ml5 fs18">▶</span>
        </el-button>
      </div>
    </h5>
    <div class="dataTable">
      <zm-table-data
        :data="tableParams.data"
        :columns="columns"
        :fetch="loadList"
        :table-params="tableParams"
        :show-page="false"
        :show-header="false"
        :border="false"
        class="fs14"
        @row-click="rowClick"
      ></zm-table-data>
    </div>
    <detail-follow
      v-if="detailParams.visible"
      v-model="detailParams.visible"
      :obj="detailParams.obj"
      :tab-type="detailParams.tabType"
    ></detail-follow>
  </div>
</div>
</template>

<script>
import { cusomterFollowColumns, followType } from './const'
import tableMixin from '@/mixins/zmTableMixin'
import {getPageList} from '@/api/src/follow'
import detailFollow from '@/views/customer/customerFollow/components/Detail'

export default {
  components: {detailFollow},
  mixins: [tableMixin],
  data () {
    return {
      followType,
      tabType: '1', // 1我的，2待我查阅，3部门
      detailParams: {
        visible: false,
        obj: {},
        tabType: '1'
      }
    }
  },
  computed: {
    columns () {
      return cusomterFollowColumns(this)
    }
  },
  methods: {
    async loadList () {
      let res = await getPageList(this.assignQuery({tabType: this.tabType}))
      this.initialTableData(res.list, res.count)
    },
    more () {
      this.$router.push('/customerFollow')
    },
    rowClick (row, event, columns) {
      this.detailParams = {
        visible: true,
        obj: {...row, ...{tabType: this.tabType}},
        tabType: this.tabType
      }
    }
  }
}
</script>

<style scoped lang="scss">
.templateComtainer {
  margin-left: .42rem;
}
.item {
  height: 31.6rem;
  vertical-align: top;
  background: #fff;
  margin: 0.57rem 0 0.57rem 0rem;
  padding: 0.1rem 0.82rem 0.82rem 0.82rem;
  .dataTable {
    height: 27rem;
    overflow: auto;
  }
}
</style>
